<template>
  <div class="page-order-list">
    <div class="search-container">
      <input v-model="frQueryParam" @confirm="reset" placeholder-class="placeholder" confirm-type="search" placeholder="手机号/姓名/订单号">
      <div class="btn-search" @click="reset">搜索</div>
    </div>
    <scroll-view class="data-container" scroll-y @scrolltolower="loadData">
      <div class="order-wrap" @click="toDetail(data)" v-for="(data,index) in dataList" :key="index">
        <div class="order-no">
          订单号:{{data.orderNo}}
          <div class="order-status">{{data.orderStatus}}</div>
        </div>
        <div class="goods-name">{{data.goodsName}}</div>
        <ul class="info-list">
          <li class="info">
            <div class="title">用户姓名:</div>
            <div class="value">{{data.realName}}</div>
          </li>
          <li class="info">
            <div class="title">用户电话:</div>
            <div class="value">{{data.userMobile}}</div>
          </li>
          <li class="info">
            <div class="title">订单金额:</div>
            <div class="value">{{data.orderAmount/100}}元</div>
          </li>
          <li class="info">
            <div class="title">录单人员:</div>
            <div class="value">{{data.saleUserName}}</div>
          </li>
          <li class="info">
            <div class="title">是否延迟发货:</div>
            <div class="value">{{data.isDelayShipping === 1 ? "是" : "否"}}</div>
          </li>
        </ul>
      </div>
    </scroll-view>
  </div>
</template>

<script>
  import orderStatus from "utils/order-status";

  export default {
    data() {
      return {
        page: 1,
        pageSize: 20,
        dataList: [],
        loading: false,
        frQueryParam: ""
      };
    },
    components: {},
    methods: {
      toDetail(data) {
        wx.navigateTo({
          url: "/pages/order-detail/main?id=" + (data.relOrderId || data.orderId)
        });
      },
      async reset() {
        this.page = 1;
        this.loading = false;
        this.dataList = [];
        await this.loadData();
      },
      async loadData() {
        if (this.loading) {
          return false;
        }
        this.loading = true;
        wx.showLoading();
        const params = {
          page: this.page++,
          pageSize: this.pageSize,
          orderType: 1,
          orderStatusList: '6,7,12',
        };
        if (this.frQueryParam) {
          params.frQueryParam = this.frQueryParam;
        }
        wx.showLoading();
        const result = await wx.request({
          url: "/bg/order/listPage",
          data: params
        });
        wx.hideLoading();
        if (result.code === 200) {
          const list = [];
          result.data.rows.forEach(data => {
            const goodsName = [];
            data.orderGoodsList.forEach(goods => {
              goodsName.push(goods.goodsName+'*' + goods.goodsNum)
            })
            const finalData = _.pick(data, ['orderId', 'orderNo', 'relOrderId', 'serviceGoodsName', 'realName', 'orderAmount', 'payTypeStr', 'userMobile', 'saleUserName', 'orderStatus']);
            finalData.orderStatus = orderStatus(finalData.orderStatus);
            finalData.goodsName = goodsName.join(',')
            list.push(finalData);
          });
          this.dataList = this.dataList.concat(list);
          this.loading = result.data.totalPage === result.data.page;
        } else {
          wx.showToast(result.message);
        }
      }
    },
    async onShareAppMessage() {
      await this.loadData();
      wx.stopPullDownRefresh();
    },
    async mounted() {
      this.loadData();
    }
  };
</script>

<style lang="scss">
  @import "../../styles/base";

  .page-order-list {
  }

  .search-container {
    @include middle-center-x();
    top: 0;
    display: flex;
    align-items: center;
    width: pxToRem(750);
    height: pxToRem(120);
    padding: pxToRem(26) pxToRem(40);
    background-color: #F5F5F5;
    z-index: 1000;
    input {
      padding-left: pxToRem(40);
      padding-right: pxToRem(40);
      margin-right: pxToRem(40);
      width: pxToRem(528);
      height: pxToRem(68);
      line-height: pxToRem(68);
      font-size: pxToRem(24);
      color: $main-color;
      background-color: #fff;
      border-radius: pxToRem(44);
    }
    .placeholder {
      color: #A7E2FD;
    }
    .btn-search {
      height: pxToRem(52);
      line-height: pxToRem(52);
      width: pxToRem(96);
      text-align: right;
      border-left: pxToRem(2) solid #E0E0E0;
      font-size: pxToRem(28);
      color: #44BDF5;
    }
  }

  .data-container {
    height: 100vh;
    width: pxToRem(750);
    padding-top: pxToRem(120);
    box-sizing: border-box;
    background-color: #F5F5F5;
    .order-wrap {
      margin-bottom: pxToRem(20);
      background-color: #fff;
      padding-left: pxToRem(30);
      padding-right: pxToRem(30);
      .order-no {
        position: relative;
        padding-top: pxToRem(30);
        padding-bottom: pxToRem(20);
        border-bottom: pxToRem(1) solid rgba(68, 189, 245, 0.3);
        font-size: pxToRem(26);
        color: #707070;
        background-color: #fff;
        .order-status {
          position: absolute;
          right: 0;
          top: pxToRem(30);
          color: #FF6550;
        }
      }
      .goods-name {
        padding-top: pxToRem(30);
        padding-bottom: pxToRem(30);
        font-size: pxToRem(28);
        line-height: pxToRem(40);
        @include multi-ellipsis();
      }
    }
    .info-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .info {
        width: pxToRem(340);
        padding-left: 0;
        &.block {
          width: pxToRem(690);
        }
      }
    }
    .info {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-left: pxToRem(30);
      font-size: pxToRem(28);
      line-height: pxToRem(40);
      padding-bottom: pxToRem(20);
      background-color: #fff;
      .title {
        margin-right: pxToRem(10);
        color: #707070;
        &.block {
          margin-bottom: pxToRem(10);
          width: 100%;
        }
      }
      .value {
        color: #000;
        margin-right: pxToRem(30);
      }
    }
  }
</style>
